<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script type="text/javascript" src="../libs/jquery.min.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<!--<div class="layui-header"></div>-->
<!--导航栏-->
<ul class="layui-nav" style="background-color: #202020">
    <li class="layui-nav-item" style="width: 5%"></li>
    <li class="layui-nav-item" style="width: 13%" value="logo"><a href=""><img src="../imgs/brand/yoyoga.png"
                                                                               style="height: 50px"></a></li>
    <li class="layui-nav-item" style="width: 12%"></li>
    <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">主页</a></li>
    <li class="layui-nav-item" style="text-align: center;width: 8%">
        <a href="#">介绍</a>
        <dl class="layui-nav-child">
            <dd><a href="">瑜伽好处</a></dd>
            <dd><a href="">瑜伽流派</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">场馆</a></li>
    <li class="layui-nav-item" style="text-align: center;width: 8%">
        <a href="#">教练</a>
        <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd class="layui-this"><a href="">选中项</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">社区</a></li>


    <!--<li class="layui-nav-item" style="float: right">
        <a href="#"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="#">个人主页</a></dd>
            <dd><a href="#">修改信息</a></dd>
            <dd><a href="#">我的钱包</a></dd>
            <dd><a href="#">我的好友</a></dd>
            <dd><a href="#">退出</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"  style="float: right">
        <a href="">我的订单</a>
    </li>
    <li class="layui-nav-item" style="float: right">
        <a href="">消息<span class="layui-badge-dot"></span></a>
    </li>-->

    <li class="layui-nav-item" style="float: right">
        <a href="">注册</a>
    </li>
    <li class="layui-nav-item" style="float: right"><span style="color: #cccccc">|</span></li>
    <li class="layui-nav-item" style="float: right">
        <a href="">登陆</a>
    </li>
</ul>
<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常规轮播</legend>
</fieldset>-->
<!--<div class="layui-carousel" id="test2" style="width: 100%">-->
<!--<div carousel-item="">-->
<!--<div>条目1</div>-->
<!--<div>条目2</div>-->
<!--</div>-->
<!--</div>-->

<!--<div style="float: left;position: absolute;z-index: 99"><img src="imgs/brand/yoyoga.png"></div>-->
<div style="padding: 20px; background-color: #dddddd;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8 layui-col-md-offset2">
            <div class="layui-card">
                <div class="layui-card-header"
                     style="text-align: center;font-size: 20px;font-weight: bolder;height: 80px;line-height: 80px">与萌宠们零距离接触，网友：我柔韧度还不如一条狗
                </div>
                <div class="layui-card-body">
                    &nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img src="//t.cn/RCzsdCq" class="layui-nav-img">小动物集中营</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span style="color: #777777">2019-08-07 19:13:56</span>
                    <hr>
                    <span class="layui-col-md10 layui-col-md-offset1">
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;瑜伽，是很多女性喜爱的运动，它不仅能够塑造美好的形体，还能提升个人魅力与气质。所以现在还多女性下班后，都会在健身房或者家里，练练瑜伽。练瑜伽时，通常都是一个很宁静祥和的心态，但如果有可爱的小动物们陪伴在一旁，又会是怎样的一番感受呢？
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在英国的一家酒店的健身房，为了招揽顾客，就想了个新点子，他们将瑜伽课开到了室外——一个湖区的野生公园里。这里空气清晰，宁静怡人。更特别的是，这个野生公园里有很多散养的狐猴。
                        <br>
                        <img src="../imgs/paging/page3/1.jpg" width="100%">
                        <br>
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;狐猴性格十分友好，也喜与人接触，在人们上瑜伽课的时候，狐猴有时还会好奇的爬到人的身上，也有的喜欢跟着人的动作一起做，好像也想测试一下自己的柔韧度呢。
                        <br>
                        <img src="../imgs/paging/page3/2.jpg" width="100%">
                        <br>
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无独有偶，美国也有这种动物瑜伽，会让小动物跟着人们一起做瑜伽。这次是山羊瑜伽。人们在做瑜伽的同时，小型山羊会跳到他们的背上。也就更加考验瑜伽爱好者的平衡能力了，不小心把可爱的山羊给摔了下来可怎么办呀！
                        <br>
                        <img src="../imgs/paging/page3/3.jpg" width="100%">
                        <br>
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;还有猫咪瑜伽课哟，在美国和加拿大比较流行。在人们做瑜伽的时候，猫咪就会随意的在练习室里走动，一会儿从脚边蹭过，一会儿又从腰间钻过，太可爱了！这谁受得了！太磨炼锻炼者的意志了好吗！
                        <br>
                        <img src="../imgs/paging/page3/4.jpg" width="100%">
                        <br>
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此外，还有一些兔子瑜伽、狗狗瑜伽。很多主人在练习瑜伽的时候，宠物们也会在一旁跟着做，而且你会惊奇的发现，它们比我们人类做得好太多了。不信你看看下面这只狗狗——
                        <br>
                        <img src="../imgs/paging/page3/5.jpg" width="100%">
                        <br>
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这狗狗的瑜伽动作之标准，身形之柔软，眼神之淡定。
                        <br>
                        <img src="../imgs/paging/page3/6.jpg" width="100%">
                        <br>
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;对此很多网友都纷纷表示：狗狗太厉害了，我的柔韧度可能还不如一条狗……
                    </span>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </div>
        </div>
    </div>
</div>
<!--下边栏-->
<div class="layui-footer layui-container" style="width: 100%;height: 250px;background-color: #202020">
    <img src="../imgs/brand/yoyoga.png" alt="" style="width: 20%;margin-left: 40%;margin-top: 50px"/>
    <p style="font-size: large;width: 10%;margin-left: 44.5%;margin-top: 10px;text-align: center"><a href="../index.html"
                                                                                                     style="color: #777777">www.yoyoga.com</a>
    </p>
    <div class="layui-copy">
        <p style="font-size: 14px;color: #777777;width: 30%;margin-left: 40%;margin-top: 20px">© 2019 All Rights Reseved
            Template by esyoga </p>
    </div>
</div>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['element', 'layer'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var layer = layui.layer;

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
            , form = layui.form;


        var $ = layui.$, active = {
            set: function (othis) {
                var THIS = 'layui-bg-normal'
                    , key = othis.data('key')
                    , options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function () {
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function () {
            var value = this.value
                , options = {};
            if (!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>

</body>